<script src="../../../main.js"></script>
<template>

  <div >
    <el-card style="margin-left:15px;margin-bottom: 15px;margin-right: 10px ">
      <!--    索引面包屑-->
      <el-breadcrumb
        separator-class="el-icon-arrow-left"
        style="margin-right: 30px;position:absolute;right:0;ub:main-center cross-center"
      >
        <el-breadcrumb-item :to="{ path: '/' }">补打签收单</el-breadcrumb-item>
        <el-breadcrumb-item>配送管理</el-breadcrumb-item>
        <el-breadcrumb-item>调度中心</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索框-->
      <div style="margin-top: 15px;margin-left: 15px;height: 40px;width:550px" >
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px">
            <el-option label="任务单id" value="任务单id"></el-option>
            <el-option label="任务单状态" value="任务单状态"></el-option>

            <!--           <el-option label="订购货物信息" value="2"></el-option>-->
            <!--           <el-option label="收购客户信息" value="3"></el-option>-->
            <!--           <el-option label="订购客户信息" value="4"></el-option>-->
            <!--           <el-option label="备注信息" value="6"></el-option>-->
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="query_Click"></el-button>
        </el-input>
      </div>

      <!--数据表-->
      <div style="margin-top: 15px;margin-left: 15px;margin-right: 20px;width:100%;">
        <template>
          <el-table
            :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pageSize,
        pageInfo.curPage*pageInfo.pageSize)"
            style="width: 100%"
            height="450">
            <el-table-column
              fixed
              prop="id"
              label="任务单id"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="orderStatus"
              label="订单状态"
              width="92px">
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus===0">可分配</span>
                <span v-if="scope.row.orderStatus===1">缺货</span>
                <span v-if="scope.row.orderStatus===2">调度中</span>
                <span v-if="scope.row.orderStatus===3">已领货</span>
                <span v-if="scope.row.orderStatus===4">配送完成</span>
                <span v-if="scope.row.orderStatus===5">已退货</span>
              </template>

            </el-table-column>

            <el-table-column
              prop="userId"
              label="配送员"
              width="92px">
            </el-table-column>
            <el-table-column
              prop="serviceMoney"
              label="服务费"
              width="92px">
            </el-table-column>
            <el-table-column
              prop="clientId"
              label="客户id"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="customerSatisfaction"
              label="客户满意度"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="taskType"
              label="任务类型"
              width="92px">
<template slot-scope="scope">
                <span v-if="scope.row.taskType===0">普通配送订单</span>
                <span v-if="scope.row.taskType===1">退订单</span>
                <span v-if="scope.row.taskType===2">换货单</span>
                <span v-if="scope.row.taskType===3">退货单</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="taskStatus"
              label="任务状态"
              width="92px">
              <template slot-scope="scope">
                <span v-if="scope.row.taskStatus===-1">配送员分配中</span>
                <span v-if="scope.row.taskStatus===0">已领货</span>
                <span v-if="scope.row.taskStatus===5">正常</span>

                <span v-if="scope.row.taskStatus===1">部分完成</span>
                <span v-if="scope.row.taskStatus===2">完成</span>
                <span v-if="scope.row.taskStatus===3">失败</span>
                <span v-if="scope.row.taskStatus===4">已退货</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="clientFeedback"
              label="客户反馈"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="servicetimeInformation"
              label="服务时间信息"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="remark"
              label="备注信息"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="updateTime"
              label="更新时间"
              width="92px">

            </el-table-column>
            <el-table-column
              prop="orderId"
              label="订单id"
              width="92px">
            </el-table-column>



            <el-table-column
              fixed="right"
              label="操作"
              width="92px">
              <template slot-scope="scope">
                <el-button type="primary" round @click="dialogPrint(scope.row)" :disabled="scope.row.orderStatus!==2">打印</el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
      </div>

      <!--     分页-->
      <div class="block" style="margin-top: 10px;margin-left: 15px;">
        <!--    <span class="demonstration">完整功能</span>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.curPage"
          :page-sizes="[4,8,10,20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>

<!--      打印的对话框-->
      <el-dialog  :visible.sync="dialogVisible" width="50%" >
        <el-form label-position="right" hight="100%" >
          <div id="printMe" ref="printContent" >
            <h2 style="text-align: center">签收单</h2>
            <div style="width:50%;float: left ;" >
              <el-form-item label="订单id:" >
                {{printForm.id}}
              </el-form-item>

              <el-form-item label="客户名字:" >
                {{printForm.name}}
              </el-form-item>

              <el-form-item label="客户电话:" >
                {{printForm.phone}}
              </el-form-item>

              <el-form-item label="邮编:">
                {{printForm.emailNnumber}}
              </el-form-item>

              <el-form-item label="收获地址:" >
                {{printForm.shippingAddress}}
              </el-form-item>

              <el-form-item label="备注:" >
                {{printForm.remark}}
              </el-form-item>



            </div>
            <div style="width:48%;float: right ;">

              <el-form-item label="送货要求:" >
                {{printForm.servicetimeInformation}}
              </el-form-item>

              <el-form-item label="任务类型:" >
                {{printForm.taskType==0?'送货收款':''}}
              </el-form-item>

              <el-form-item label="收货人签名:" >
                <el-input ></el-input>
              </el-form-item>

              <el-form-item label="送货员签名:" >
                <el-input ></el-input>
              </el-form-item>

              <el-form-item>

              </el-form-item>
              <el-form-item>

              </el-form-item>
              <el-form-item>

              </el-form-item>


<!--&lt;!&ndash;              visibility: hidden;opacity:0&ndash;&gt;-->
<!--              <el-form-item label="商品id:"  v-show="false">-->
<!--                {{printForm.receptBo_id}}-->
<!--              </el-form-item>-->

<!--              <el-form-item label="商品名字:"   v-show="false">-->
<!--                {{printForm.receptBo_productName}}-->
<!--              </el-form-item>-->

<!--              <el-form-item label="商品数量:"  v-show="false">-->
<!--                {{printForm.receptBo_number}}-->
<!--              </el-form-item>-->

<!--              <el-form-item label="商品价格:"  v-show="false">-->
<!--                {{printForm.receptBo_price}}-->
<!--              </el-form-item>-->
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" >取 消</el-button>
             <el-button type="primary" v-print="'#printMe'" @click="updateOrder" >打印</el-button>
           <!-- <el-button type="primary" @click="toImg" >打印</el-button>
           <img style="margin-top:20px; visibility: hidden;opacity:0" :src="img" alt=""> -->
          </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import html2canvas from 'html2canvas'  // 转图片打印需要先安装html2Canvas和print-js
  import printJS from 'print-js'
  // Vue.use(Print);
  export default {
    data() {
      return {
        tableData: [],

        pageInfo:{
          curPage:1,
          pageSize:4,
        },
        total:0,

        input: '',
        select: '',
        queryInfo: {
          createTime:'',
          finishTime:'',
          queryContain:'',
          queryType:''
        },
        // tableData: [],
        // pageInfo:{
        //   curPage:1,
        //   pageSize:4
        // },
        // total:0,
        input: '',
        select: '',
        dialogVisible: false,
        printForm:{
          emailNnumber:'',
          id:'',
          name:'',
          phone:'',
          receptBo_id:'',
          receptBo_number:'',
          receptBo_price:'',
          receptBo_productName:'',
          remark:'1',
          servicetimeInformation:'',
          shippingAddress:'',
          taskType:''
        },
        img: '',
        printObj: {
          id: 'printMe',
          popTitle: '',
          extraCss: 'https://www.google.com,https://www.google.com',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
        },
        watch: {
        },
        // isShow:true,
        // _qq:''
        judgeInfo:{
          judgeStatus:false,
          orderStatus:'',
          orderId:'',
        },
        judge_orderStatus:'',
        judge_orderId:'',
      }
    },
    methods:{
      //获得数据
      async getMessage()
      {
        let url='/api/dispatching_management/query_all_missionList'
        const {data:res}=await this.$http.get(url).catch(err=>{
          console.log(err.msg)
          this.$message.error('服务器没有权限，请多试几遍！')
        })
        if (res.code==200)
        {
          // this.$message.success(res.msg)
          console.log(res.msg)
          this.tableData=res.data
          this.total=res.data.length
        }
        else if (res.code!=200)
        {
          this.$message.error(res.error())
        }

      },
      //分页函数1
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageInfo.pageSize=val
      },
      //分页函数2
      handleCurrentChange(val) {
        this.pageInfo.curPage=val
        console.log(`当前页: ${val}`);
      },
      //查询函数
      async query_Click() {
        console.log('查询');
        console.log('this.input:'+this.input);
        console.log('this.select:'+this.select);
        if(this.input=='')
        {
          return this.$message.error('请输入相关查询数据内容')
        }
        if(this.select=='')
        {
          return this.$message.error('请选择查询类型')
        }
        else if((this.select!==''||this.select!==null)&&(this.input!==''||this.input!==null))
        {
          switch (this.select)
          {
            case "任务单id":
              //执行查询id的代码块
              this.query_orderId()
              break;
            case "任务单状态":
              this.query_orderType()
              break;
            // case "订单状态":
            //   this.query_orderType()
            //   break;
            // case "客户姓名":
            //   this.query_orderType()
            //   break;
            // case "联系电话":
            //   this.query_orderType()
            //   break;
            default:
              break;

          }
        }

      },
      //根据id查询
      async query_orderId(){
        // let url="/api/dispatching_management/queryDispat_by_id/"
        let url='/api/dispatching_management/query_mission_by_id/'
        console.log('根据id查询');
        const{data:res}=await this.$http.get(`${url}/${this.input}`).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log(err.message)
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          console.log(res.data)
          this.tableData=res.data
        }
        else if(res.code!==200)
        {
          this.$message.error(res.msg)
        }
      },
      //根据任务单类型()
      async query_orderType()
      {
        console.log('任务单类型：')
        let url='/api/dispatching_management/query_missionList/'
        const {data:res}=await this.$http.get(`${url}${this.input}`).catch(err=>{
          console.log(err.msg)
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          this.tableData=res.data
        }
        else if (res.code!=200)
        {
          this.$message.error(res.msg)
        }
        // let url='/api/dispatching_management/query_order_on_require'
        //
        // this.queryInfo.queryContain=this.input
        // this.queryInfo.queryType=this.select
        //
        // const{data:res}=await this.$http.post(url,this.queryInfo).catch(err=>{
        //   this.$message.error("对不起，服务器异常或没有权限！请多试几次！")
        //   console.log(err.msg)
        // })
        //
        // if(res.code==200)
        // {
        //   console.log('查询结果')
        //   this.$message.success(res.msg)
        //   console.log(res.data)
        //   this.tableData=res.data
        // }
        // else if(res.code!=200)
        // {
        //   // this.$message.error(res.msg+'更新错误')
        //   this.$message.error('更新错误')
        //
        // }
      },
      // printReceipt()
      // {
      //   // this.isShow=!this.isShow
      //   // window.print();
      //   this.dialogVisible=false
      //   let subOutputRankPrint=document.getElementById('printBox')
      //   // console.log(subOutputRankPrint.innerText);
      //   let newContent=subOutputRankPrint.innerHTML;
      //   let oldContent=document.body.innerHTML;
      //   // let data=document.getE
      //   document.body.innerHTML=newContent;
      //   window.print();
      //   window.location.reload();
      //   document.body.innerHTML=oldContent;
      //   // return false;
      //   // this.isShow=true
      //   // this.isShow=!this.isShow
      // },
      //弹出对话框
      //点击打开将要打印的表单，对话框数据的赋值渲染
      async dialogPrint(row)
      {
        //2代表调度中，还未领货，修改之后修改订单状态
        // 调度中（2）、已领货（3）、
        console.log('打印')
          console.log(row)
        this.judge_orderId=row.orderId
        console.log(row.orderId)
        // this.get_orderStatus(this.judge_orderId)
        
          //赋值给将要打印的orderId
          let url='/api/dispatching_management/query_recepit_by_id/'
          const {data:res}=await this.$http.get(`${url}${row.orderId}`).catch(err=>{
            console.log(err.msg)
            this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          })
          console.log(res.data)
          if(res.code==200)
          {
            console.log('传回来的即将要打印的数据：');
            console.log(res.data)
            //获取到数据之后渲染再即将打印的dialog
            this.printForm.emailNnumber=res.data.emailNnumber
            this.printForm.id=res.data.id
            this.printForm.name=res.data.name
            this.printForm.phone=res.data.phone
            // this.printForm.receptBo_id=res.data.receptBo.id
            // this.printForm.receptBo_number=res.data.receptBo.number
            // this.printForm.receptBo_price=res.data.receptBo.price
            // this.printForm.receptBo_productName=res.data.receptBo.productName
            this.printForm.remark=res.data.remark
            this.printForm.servicetimeInformation=res.data.servicetimeInformation
            this.printForm.shippingAddress=res.data.shippingAddress
            this.printForm.taskType=res.data.taskType

            this.dialogVisible=true
            console.log(this.printForm.receptBo)
          }
          else if (res.code!==200)
          {
            console.log(res.msg)
            this.$message.error(res.msg)
          }
      },

      //转图片打印
      // toImg()
      // {
      //   html2canvas(this.$refs.printContent, {
      //     backgroundColor: null,
      //     useCORS: true,
      //     windowHeight: document.body.scrollHeight
      //   }).then((canvas) => {
      //     // let url = canvas.toDataURL('image/jpeg', 1.0)
      //     const url = canvas.toDataURL()
      //     this.img = url
      //     printJS({
      //       printable: url,
      //       type: 'image',
      //       //渲染照片标题
      //       documentTitle: ''
      //     })
      //     console.log(url)
      //     this.judgeInfo.judgeStatus=true
      //   })

      // },
      
      //获取订单状态
      // async get_orderStatus(orderId)
      // {
      //   console.log(orderId)
      //   //根据订单id查询到订单status
      //   let url_queryStatus='/api/dispatching_management/query_order_by_id/'
      //   const {data:res}=await this.$http.get(`${url_queryStatus}${orderId}`)
      //   if(res.code==200)
      //   {
      //     console.log(res.data)
      //     console.log(res.data.orderStatus);
      //     this.judge_orderStatus=res.data.orderStatus
      //   }
      //   else if (res.code!==200)
      //   {
      //     console.log('获取订单状态失败');
      //   }
      // },
      async updateOrder()
      {
        let url = '/api/dispatching_management/updateOrder/'
        const {data:res}=await this.$http.get(`${url}${this.judgeInfo.orderId}/${3}`).catch(
          err=>{
            this.$message.error('数据更新失败，服务器更新失败')
            console.log(err.msg)
          }
        )
        if (res.code==200)
        {
          console.log('数据更新成功')
          // this.$message.success(res.msg)
          //重新获取数据
          console.log(res.msg)
          this.getMessage()
        }
        else if (res.code!==200)
        {
          console.log('数据更新失败')
          this.$message.error(res.msg)
        }
        // if (this.judgeInfo.judgeStatus)
        // {
        //
        // }
      },
    },
    created() {
      this.getMessage()
      // this.updateOrder()
    }
  };
</script>
<style scoped>
  .el-select .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
